<template>
  <div class="survey">
    <div class="survey-top">
      <el-card>
        <div class="title-div">
          <h2>{{$t('WWCX.title1')}}</h2>
          <div class="selected-div">
            <!--多选-->
            <el-select
              @change="changeValue1"
              v-model="value1"
              popper-class="survey-select"
              multiple
              collapse-tags
              placeholder="BG"
              style="margin-left: 20px;">
              <el-option
                v-for="item in value1Options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            <!--单选-->
            <el-select v-model="value2" @change="changeValue2" popper-class="survey-select" placeholder="Service Type">
              <el-option
                v-for="item in value2Options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="echart1" id="echart1"></div>
        <div class="echart2" id="echart2"></div>
      </el-card>
    </div>
    <div class="survey-bottom">
      <el-card>
        <div>
          <div class="title-div">
            <h2>{{$t('WWCX.title2')}}</h2>
            <div class="selected-div">
              <!--多选-->
              <el-select
                @change="changeValue3"
                v-model="value3"
                placeholder="GEO"
                multiple
                collapse-tags>
                <el-option
                  v-for="item in value3Options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
              <el-select
                @change="changeValue4"
                v-model="value4"
                placeholder="Customer Type"
                multiple
                collapse-tags>
                <el-option
                  v-for="item in value4Options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </div>
          </div>
          <el-row :gutter="10">
            <el-col :span="8">
              <h4>{{$t('WWCX.service')}}</h4>
              <div class="echart3" id="echart3"></div>
            </el-col>
            <el-col :span="7">
              <h4>{{$t('WWCX.product')}}</h4>
              <div class="echart4" id="echart4"></div>
            </el-col>
            <el-col :span="9">
              <h4>{{$t('WWCX.other')}}</h4>
              <div class="echart5" id="echart5"></div>
            </el-col>
          </el-row>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import {getUsername} from '../../utils/auth'
  export default {
    data() {
      return {
        value1: [],
        value1Options: [],
        value2: '',
        value2Options: [],
        value3: [],
        value3Options: [],
        value4: [],
        value4Options: [],
        echartsObj: {
          echart1: null,
          echart2: null,
          echart3: null,
          echart4: null,
          echart5: null,
        },
        echartsDatas: {
          echart1Data: {},
          echart2Data: {},
          echart3Data: {},
          echart4Data: {},
          echart5Data: {}
        },
        optionColors: ['#0090e9', '#6be6c1', '#59c4e6', '#ffb980', '#b692df']
      }
    },
    methods: {
      getEchartsDom() {
        this.echartsObj.echart1 = this.echarts.init(document.getElementById('echart1'))
        this.echartsObj.echart2 = this.echarts.init(document.getElementById('echart2'))
        this.echartsObj.echart3 = this.echarts.init(document.getElementById('echart3'))
        this.echartsObj.echart4 = this.echarts.init(document.getElementById('echart4'))
        this.echartsObj.echart5 = this.echarts.init(document.getElementById('echart5'))
      },
      getSelectData() {
        this.getValue1Options()
        this.getValue2Options()
        this.getValue3Options()
        this.getValue4Options()
      },
      loadAllEchartsDatas() {
        this.loadEchart1Data()
        this.loadEchart2Data()
        this.loadEchart3Data()
        this.loadEchart4Data()
        this.loadEchart5Data()
      },
      echartsResize() {
        const _this = this
        // 因为这个切换是EchartsDom先做的重置；然后Element才切换过去的，所以要设置定时器；保证先切换过去页面，再echatrts重置
        setTimeout(function() {
          _this.echartsObj.echart1.resize()
          _this.echartsObj.echart2.resize()
          _this.echartsObj.echart3.resize()
          _this.echartsObj.echart4.resize()
          _this.echartsObj.echart5.resize()
        }, 200)
      },
      showEchart1() {
        let option = {
          color: this.optionColors,
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            },
            textStyle: {
              align: 'left',
              color: '#7588E4'
            },
            backgroundColor: 'rgba(255,255,255,1)',
            padding: [5, 10],
            extraCssText: 'box-shadow: 0 3px 12px rgba(224,226,233,1)'
          },
          legend: {
            data: this.echartsDatas.echart1Data.bar.value.map(item => item.name),
            itemWidth: 15,
            itemHeight: 15
          },
          grid: {
            left: 20,
            right: 20,
            // bottom: '3%',
            containLabel: true
          },
          yAxis: {
            type: 'value',
            name: '(score)',
            boundaryGap: [0, 0.01],
            axisLabel: {
              color: '#959eaf',
              fontFamily: 'Helvetica',
              // textStyle: {
              //   fontSize: 10 // 让字体变大
              // }
            },
            axisLine: {
              lineStyle: {
                color: '#959eaf'
              }
            }
          },
          xAxis: {
            type: 'category',
            data: this.echartsDatas.echart1Data.name,
            axisLabel: {
              color: '#959eaf',
              fontFamily: 'Helvetica',
              // textStyle: {
              //   fontSize: 10 // 让字体变大
              // }
            },
            axisLine: {
              lineStyle: {
                color: '#959eaf'
              }
            }
          },
          series: this.echartsDatas.echart1Data.bar.value.map(item => {
            return {
              name: item.name,
              type: 'bar',
              barGap: 0,
              data: item.value
            }
          }),
        }
        this.echartsObj.echart1.setOption(option)
      },
      showEchart2() {
        let option = {
          color: this.optionColors,
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            },
            textStyle: {
              align: 'left',
              color: '#7588E4'
            },
            backgroundColor: 'rgba(255,255,255,1)',
            padding: [5, 10],
            extraCssText: 'box-shadow: 0 3px 12px rgba(224,226,233,1)'
          },
          legend: {
            data: this.echartsDatas.echart2Data.bar.value.map(item => item.name),
            itemWidth: 15,
            itemHeight: 15
          },
          grid: {
            left: 20,
            right: 20,
            // bottom: '3%',
            containLabel: true
          },
          yAxis: {
            type: 'value',
            name: '(score)',
            boundaryGap: [0, 0.01],
            axisLabel: {
              color: '#959eaf',
              fontFamily: 'Helvetica',
              // textStyle: {
              //   fontSize: 10 // 让字体变大
              // }
            },
            axisLine: {
              lineStyle: {
                color: '#959eaf'
              }
            }
          },
          xAxis: {
            type: 'category',
            data: this.echartsDatas.echart2Data.name,
            axisLabel: {
              color: '#959eaf',
              fontFamily: 'Helvetica',
              // textStyle: {
              //   fontSize: 10 // 让字体变大
              // }
            },
            axisLine: {
              lineStyle: {
                color: '#959eaf'
              }
            }
          },
          series: this.echartsDatas.echart2Data.bar.value.map(item => {
            return {
              name: item.name,
              type: 'bar',
              barGap: 0,
              data: item.value
            }
          }),
        }
        this.echartsObj.echart2.setOption(option)
      },
      showEchart3() {
        // 图例数据
        let legendArr = this.echartsDatas.echart3Data.name
        // 雷达图不同维度数据
        let indicatorData = this.echartsDatas.echart3Data.lin.value.map(item => {
          return {name: item.name}
        })
        let seriesData = []
        for (let i = 0; i < this.echartsDatas.echart3Data.name.length; i++) {
          seriesData.push({
            name: this.echartsDatas.echart3Data.name[i], value: this.echartsDatas.echart3Data.lin.value.map(item => item.value[i])
          })
          // seriesData = optionData.bar.value.map(item => {
          //   console.log('颜色')
          //   console.log(colors[i])
          //   return {
          //     name: optionData.name[i], type: 'bar', barGap: 0, data: item.value, itemStyle: {
          //       normal: {
          //         color: colors[i]
          //       }
          //     }
          //   }
          // })
        }
        let option = {
          title:{
            subtext: '(score)'
          },
          color: this.optionColors,
          tooltip: {
            confine: true,
            textStyle: {
              align: 'left',
              color: '#7588E4'
            },
            backgroundColor: 'rgba(255,255,255,1)',
            padding: [5, 10],
            extraCssText: 'box-shadow: 0 3px 12px rgba(224,226,233,1)'
          },
          legend: {
            data: legendArr,
            itemWidth: 15,
            itemHeight: 15
          },
          grid: {
            left: 0,
            right: 0,
            bottom: '3%',
            containLabel: true
          },
          radar: {
            // shape: 'circle',
            name: {
              textStyle: {
                // color: '#fff',
                // backgroundColor: '#999',
                borderRadius: 3,
                padding: [3, 5]
              }
            },
            indicator: indicatorData,
            radius: '50%',
            // splitNumber: 2
          },
          series: [{
            name: '名称',
            type: 'radar',
            // areaStyle: {normal: {}},
            data : seriesData
          }]
        }
        this.echartsObj.echart3.setOption(option)
      },
      showEchart4() {
        let option = {
          color: this.optionColors,
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            },
            textStyle: {
              align: 'left',
              color: '#7588E4'
            },
            backgroundColor: 'rgba(255,255,255,1)',
            padding: [5, 10],
            extraCssText: 'box-shadow: 0 3px 12px rgba(224,226,233,1)'
          },
          legend: {
            data: this.echartsDatas.echart4Data.bar.value.map(item => item.name),
            itemWidth: 15,
            itemHeight: 15
          },
          grid: {
            left: 20,
            right: 20,
            // bottom: '3%',
            containLabel: true
          },
          yAxis: {
            type: 'value',
            name: '(score)',
            boundaryGap: [0, 0.01],
            axisLabel: {
              color: '#959eaf',
              fontFamily: 'Helvetica',
              // textStyle: {
              //   fontSize: 10 // 让字体变大
              // }
            },
            axisLine: {
              lineStyle: {
                color: '#959eaf'
              }
            }
          },
          xAxis: {
            type: 'category',
            data: this.echartsDatas.echart4Data.name,
            axisLabel: {
              color: '#959eaf',
              fontFamily: 'Helvetica',
              // textStyle: {
              //   fontSize: 10 // 让字体变大
              // }
            },
            axisLine: {
              lineStyle: {
                color: '#959eaf'
              }
            }
          },
          series: this.echartsDatas.echart4Data.bar.value.map(item => {
            return {
              name: item.name,
              type: 'bar',
              barGap: 0,
              data: item.value
            }
          }),
        }
        this.echartsObj.echart4.setOption(option)
      },
      showEchart5() {
        // 图例数据
        let legendArr = this.echartsDatas.echart5Data.name
        // 雷达图不同维度数据
        let indicatorData = this.echartsDatas.echart5Data.lin.value.map(item => {
          return {name: item.name}
        })
        let seriesData = []
        for (let i = 0; i < this.echartsDatas.echart5Data.name.length; i++) {
          seriesData.push({
            name: this.echartsDatas.echart5Data.name[i], value: this.echartsDatas.echart5Data.lin.value.map(item => item.value[i])
          })
        }
        let option = {
          title:{
            subtext: '(score)'
          },
          color: this.optionColors,
          tooltip: {
            confine: true,
            textStyle: {
              align: 'left',
              color: '#7588E4'
            },
            backgroundColor: 'rgba(255,255,255,1)',
            padding: [5, 10],
            extraCssText: 'box-shadow: 0 3px 12px rgba(224,226,233,1)'
          },
          legend: {
            data: legendArr,
            itemWidth: 15,
            itemHeight: 15
          },
          grid: {
            left: 0,
            right: 0,
            bottom: '3%',
            containLabel: true
          },
          radar: {
            // shape: 'circle',
            name: {
              textStyle: {
                // color: '#fff',
                // backgroundColor: '#999',
                borderRadius: 3,
                padding: [3, 5]
              }
            },
            indicator: indicatorData,
            radius: '50%',
            // splitNumber: 2
          },
          series: [{
            name: '名称',
            type: 'radar',
            // areaStyle: {normal: {}},
            data : seriesData
          }]
        }
        this.echartsObj.echart5.setOption(option)
      },

      changeValue1(params) {
        this.value1 = params
        this.loadEchart1Data()
        this.loadEchart2Data()
      },
      changeValue2(params) {
        this.value2 = params
        this.loadEchart1Data()
        this.loadEchart2Data()
      },
      changeValue3(params) {
        this.value3 = params
        this.loadEchart3Data()
        this.loadEchart4Data()
        this.loadEchart5Data()
      },
      changeValue4(params) {
        this.value4 = params
        this.loadEchart3Data()
        this.loadEchart4Data()
        this.loadEchart5Data()
      },

      // axios&loadData
      async loadEchart1Data() {
        let params = {
          BG: this.value1,
          serviceType: this.value2,
          username: getUsername()
        }
        let res = await this.axios.post('surveyFroms/fisQuarterByCustomerTypeSurvey.do', params)
        let resData = res.data.data
        this.echartsDatas.echart1Data = resData
        this.showEchart1()
        // console.log('!!!!!!!!!')
        // console.log(resData)
      },
      async loadEchart2Data() {
        let params = {
          BG: this.value1,
          serviceType: this.value2,
          username: getUsername()
        }
        let res = await this.axios.post('surveyFroms/fisQuarterByGeoSurvey.do', params)
        let resData = res.data.data
        this.echartsDatas.echart2Data = resData
        this.showEchart2()
      },
      async loadEchart3Data() {
        let params = {
          geo: this.value3,
          customerType: this.value4,
          username: getUsername()
        }
        let res = await this.axios.post('surveyFroms/serviceSurveyDetailsByFisYear.do', params)
        let resData = res.data.data
        this.echartsDatas.echart3Data = resData
        this.showEchart3()
      },
      async loadEchart4Data() {
        let params = {
          geo: this.value3,
          customerType: this.value4,
          username: getUsername()
        }
        let res = await this.axios.post('surveyFroms/productSurveyDetailsByFisYear.do', params)
        let resData = res.data.data
        this.echartsDatas.echart4Data = resData
        this.showEchart4()
      },
      async loadEchart5Data() {
        let params = {
          geo: this.value3,
          customerType: this.value4,
          username: getUsername()
        }
        let res = await this.axios.post('surveyFroms/otherSurveyDetailsByFisYear.do', params)
        let resData = res.data.data
        this.echartsDatas.echart5Data = resData
        this.showEchart5()
      },
      async getValue1Options() {
        let params = {
          username: getUsername()
        }
        let res = await this.axios.post('surveyFroms/selectBG.do', params)
        let resData = res.data.data
        this.value1Options = resData.map(item => {
          return {
            label: item,
            value: item
          }
        })
      },
      async getValue2Options() {
        let params = {
          username: getUsername()
        }
        let res = await this.axios.post('surveyFroms/selectServiceType.do', params)
        let resData = res.data.data
        this.value2Options = resData.map(item => {
          return {
            label: item,
            value: item
          }
        })
      },
      async getValue3Options() {
        let params = {
          username: getUsername()
        }
        let res = await this.axios.post('surveyFroms/authGeoForSearch.do', params)
        let resData = res.data.data.geo
        this.value3Options = resData.map(item => {
          return {
            label: item,
            value: item
          }
        })
      },
      async getValue4Options() {
        let params = {
          username: getUsername()
        }
        let res = await this.axios.post('surveyFroms/customerType.do', params)
        let resData = res.data.data
        this.value4Options = resData.map(item => {
          return {
            label: item,
            value: item
          }
        })
      }
    },
    mounted() {
      this.getEchartsDom()
      this.loadAllEchartsDatas()
      this.getSelectData()
      window.onresize = () => {
        this.echartsResize()
      }
    },
    computed: {
      ...mapGetters(['sidebar'])
    },
    watch: {
      'sidebar.opened': function() {
        this.echartsResize()
      }
    }
  }
</script>

<style lang="scss" scoped>
  .survey {
    padding: 20px;
    .echart1, .echart2 {
      width: 100%;
      height: 300px;
    }
    .echart3, .echart4, .echart5 {
      width: 100%;
      height: 300px;
    }
    h2 {
      margin: 0;
      padding: 0;
    }
    .survey-top {
      .title-div {
        height: 50px;
        h2 {
          float: left;
          font-size: 20px;
          font-family: OpenSansShin;
          color: #333;
        }
        .selected-div {
          float: right;
        }
      }
    }
    .survey-bottom {
      margin: 20px 0 10px;
      .title-div {
        height: 50px;
        h2 {
          float: left;
        }
        .selected-div {
          float: right;
        }
      }
    }
  }
</style>
